fix: Allow ToC to scroll independently of page content #7754

utkarsh125 · 2025-05-16T18:37:24Z

Description

Fixed the issue of the Table of Contents (ToC) being statically positioned. The ToC now scrolls to the top under the heading instead of being sticky. Adjustments were made to ensure it blends seamlessly with the article layout at
/en/download/package-manager/all

fixes: #7740

Files Changed

packages/ui-components/Containers/MetaBar/index.tsx

packages/ui-components/Containers/MetaBar/index.module.css

Validation

Verified that the ToC no longer remains sticky and is correctly positioned beneath the article heading.

Confirmed visual alignment for larger screens
No regressions observed in MetaBar behavior

Video

ToC.Fix-1747407308773.mp4

Related Issues

fixes: #7740

Check List

I have read the Contributing Guidelines and made commit messages that follow the guideline.

I have run pnpm format to ensure the code follows the style guide.
I have run pnpm test to check if all tests are passing.
I have run pnpm build to check if the website builds without errors.
I've covered newly added functionality with unit tests if necessary.

vercel · 2025-05-16T18:37:28Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	May 28, 2025 8:38am

packages/ui-components/Containers/MetaBar/index.module.css

packages/ui-components/Containers/MetaBar/index.tsx

packages/ui-components/Containers/MetaBar/index.module.css

github-actions · 2025-05-18T13:29:38Z

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟠 85	🟢 100	🟢 100	🟢 91	🔗
/en/about	🟢 100	🟢 100	🟢 100	🟠 82	🔗
/en/about/previous-releases	🟢 100	🟢 100	🟢 100	🟠 83	🔗
/en/download	🟢 98	🟢 100	🟢 100	🟢 91	🔗
/en/blog	🟢 100	🟢 100	🟢 96	🟢 92	🔗

codecov-commenter · 2025-05-18T13:30:50Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 75.32%. Comparing base (d122e58) to head (6d782d1).
Report is 1 commits behind head on main.

✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7754      +/-   ##
==========================================
- Coverage   75.35%   75.32%   -0.04%     
==========================================
  Files          96       96              
  Lines        7861     7861              
  Branches      192      192              
==========================================
- Hits         5924     5921       -3     
- Misses       1936     1939       +3     
  Partials        1        1

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

avivkeller · 2025-05-18T13:31:41Z

Can you please check the visual regression: https://www.chromatic.com/test?appId=64c7d71358830e9105808652&id=6829e0dcf23a597de1aee02b

utkarsh125 · 2025-05-18T15:27:47Z

Can you please check the visual regression: https://www.chromatic.com/test?appId=64c7d71358830e9105808652&id=6829e0dcf23a597de1aee02b

@avivkeller I did make some changes, although I do not know how to test it. Can you let me know how can I test the chromatic diffs?

utkarsh125 · 2025-05-18T21:22:20Z

The issue is probably because of the added padding

@avivkeller

I have removed the additional p-4 from
maybe this will solve the issue, I had added it to give more space to the Metabar from the bottom, I hope this can fix it.

also, I was talking about this specific link that you sent, how can I obtain it for the latest build?
https://www.chromatic.com/test?appId=64c7d71358830e9105808652&id=6829e0dcf23a597de1aee02b

This thing was pretty helpful because of the comparative visuals.

&:last-child {
      @apply mb-0
          p-4 <-------
    }

utkarsh125 · 2025-05-19T21:44:18Z

I think the chromatic diff is showing up because of sticky scroll bar, and in order to make sure the MetaBar isn't too small, I had changed the max-height to give some scrolling space to the wrapper in the MetaBar

packages/ui-components/Containers/MetaBar/index.module.css

ovflowd · 2025-05-25T13:00:35Z

@avivkeller are you happy with the state of the PR?

ovflowd · 2025-05-25T13:01:04Z

Something really odd happened with this preview? https://nodejs-org-git-fork-utkarsh125-allow-toc-to-scrol-cd0e20-openjs.vercel.app/en

avivkeller · 2025-05-25T13:03:16Z

Something really odd happened with this preview? https://nodejs-org-git-fork-utkarsh125-allow-toc-to-scrol-cd0e20-openjs.vercel.app/en

What? You can't read that? 🤣

utkarsh125 · 2025-05-25T13:34:12Z

Something really odd happened with this preview? https://nodejs-org-git-fork-utkarsh125-allow-toc-to-scrol-cd0e20-openjs.vercel.app/en

https://nodejs-org-git-fork-utkarsh125-allow-toc-to-scrol-cd0e20-openjs.vercel.app/en/download/package-manager/all

This link is working surprisingly. What can be the issue here?

ovflowd · 2025-05-25T13:59:25Z

Something really odd happened with this preview? https://nodejs-org-git-fork-utkarsh125-allow-toc-to-scrol-cd0e20-openjs.vercel.app/en

What? You can't read that? 🤣

As far as I know I haven't updated my certification on Gebrish 😋

AugustinMauroy

LGMT ! Thanks for your first contribution

packages/ui-components/Containers/MetaBar/index.module.css

bmuenzenmeyer

LGTM - thanks!

ToC Fix

b42040b

utkarsh125 requested a review from a team as a code owner May 16, 2025 18:37

vercel bot deployed to Preview May 16, 2025 18:39 View deployment

avivkeller reviewed May 16, 2025

View reviewed changes

packages/ui-components/Containers/MetaBar/index.module.css Outdated Show resolved Hide resolved

packages/ui-components/Containers/MetaBar/index.tsx Outdated Show resolved Hide resolved

Fix: replaced raw css with tailwind

05de366

vercel bot deployed to Preview May 16, 2025 21:58 View deployment

avivkeller reviewed May 16, 2025

View reviewed changes

packages/ui-components/Containers/MetaBar/index.module.css Outdated Show resolved Hide resolved

Restored packages/ui-components/Containers/MetaBar/index.tsx

e752090

vercel bot deployed to Preview May 16, 2025 22:11 View deployment

Replaced display:none with @apply hidden

fc7ad61

vercel bot deployed to Preview May 16, 2025 22:27 View deployment

avivkeller reviewed May 17, 2025

View reviewed changes

packages/ui-components/Containers/MetaBar/index.module.css Outdated Show resolved Hide resolved

Fix: not all elements were being rendered

473b8a5

vercel bot deployed to Preview May 17, 2025 18:55 View deployment

Removed the redundant scrollbar styles

d0d0427

vercel bot deployed to Preview May 17, 2025 19:04 View deployment

fix: metabar no longer has a short length

79a83a0

vercel bot deployed to Preview May 18, 2025 07:03 View deployment

fix: metabar length fix

dd9a507

vercel bot deployed to Preview May 18, 2025 09:30 View deployment

avivkeller added the github_actions:pull-request Trigger Pull Request Checks label May 18, 2025

avivkeller deployed to Storybook May 18, 2025 13:29 — with GitHub Actions View deployment

github-actions bot removed the github_actions:pull-request Trigger Pull Request Checks label May 18, 2025

fix: chromatic diff

22bd816

vercel bot deployed to Preview May 18, 2025 15:01 View deployment

fix: removed the added padding

cf6dfa1

vercel bot deployed to Preview May 18, 2025 21:00 View deployment

fix: removed the additional p-4

1428437

vercel bot deployed to Preview May 18, 2025 21:19 View deployment

ovflowd reviewed May 25, 2025

View reviewed changes

packages/ui-components/Containers/MetaBar/index.module.css Show resolved Hide resolved

ovflowd added the github_actions:pull-request Trigger Pull Request Checks label May 25, 2025

ovflowd deployed to Storybook May 25, 2025 13:00 — with GitHub Actions View deployment

github-actions bot removed the github_actions:pull-request Trigger Pull Request Checks label May 25, 2025

AugustinMauroy approved these changes May 26, 2025

View reviewed changes

avivkeller reviewed May 26, 2025

View reviewed changes

packages/ui-components/Containers/MetaBar/index.module.css Outdated Show resolved Hide resolved

Merge branch 'nodejs:main' into allow-toc-to-scroll-independently

a815187

vercel bot deployed to Preview May 28, 2025 05:51 View deployment

added global variable for height

6d782d1

vercel bot deployed to Preview May 28, 2025 08:38 View deployment

avivkeller approved these changes May 28, 2025

View reviewed changes

bmuenzenmeyer approved these changes May 28, 2025

View reviewed changes

bmuenzenmeyer enabled auto-merge May 28, 2025 11:18

bmuenzenmeyer added the github_actions:pull-request Trigger Pull Request Checks label May 28, 2025

bmuenzenmeyer deployed to Storybook May 28, 2025 11:20 — with GitHub Actions View deployment

github-actions bot removed the github_actions:pull-request Trigger Pull Request Checks label May 28, 2025

bmuenzenmeyer added this pull request to the merge queue May 28, 2025

Merged via the queue into nodejs:main with commit f349d7e May 28, 2025
19 checks passed

Uh oh!

fix: Allow ToC to scroll independently of page content #7754

fix: Allow ToC to scroll independently of page content #7754

Uh oh!

Conversation

utkarsh125 commented May 16, 2025

Description

Files Changed

Validation

Video

Related Issues

Check List

Uh oh!

vercel bot commented May 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented May 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov-commenter commented May 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

avivkeller commented May 18, 2025

Uh oh!

utkarsh125 commented May 18, 2025

Uh oh!

utkarsh125 commented May 18, 2025

Uh oh!

utkarsh125 commented May 19, 2025

Uh oh!

Uh oh!

ovflowd commented May 25, 2025

Uh oh!

ovflowd commented May 25, 2025

Uh oh!

avivkeller commented May 25, 2025

Uh oh!

utkarsh125 commented May 25, 2025

Uh oh!

ovflowd commented May 25, 2025

Uh oh!

AugustinMauroy left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

bmuenzenmeyer left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

vercel bot commented May 16, 2025 •

edited

Loading

github-actions bot commented May 18, 2025 •

edited

Loading

codecov-commenter commented May 18, 2025 •

edited

Loading